<template>
  <!--  <h1>数据分析(图表显示)</h1>-->
  <div>
    <span v-show="formState.isShowTimeScale">数据的时间范围为：{{formState.smallestTime}}至{{formState.biggestTime}}</span><br/>
    <a-space direction="vertical" :size="12">
      <a-range-picker
        :show-time="{ format: 'HH:mm:ss' }"
        format="YYYY-MM-DD HH:mm:ss"
        :placeholder="['Start Time', 'End Time']"
        @change="onRangeChange"
        @ok="onRangeOk"
      />
    </a-space>
    <a-button style="margin-left: 5px" type="primary" @click="selectDate">开始分析</a-button>
  </div>
  <hr>
  <div v-show="formState.isShowCard">
    <!--    <h1>分析结果展示</h1>-->
    <tr>
      <td>
        <!--  温度-->
        <div id="myTemChartAnalysis" :style="{ width:formState.width+'px', height: formState.height+'px' }"></div>
      </td>
      <td>
        <!--  湿度-->
        <div id="myHumChartAnalysis" :style="{ width:formState.width+'px', height: formState.height+'px' }"></div>
      </td>
      <td>
        <!--  光照强度-->
        <div id="myAdcxChartAnalysis" :style="{ width:formState.width+'px', height: formState.height+'px' }"></div>
      </td>
    </tr>
    <tr>
      <td>
        <!--  温度-->
        <div id="temValues" :style="{ width:formState.width+'px', height: formState.height+'px' }"></div>
      </td>
      <td>
        <!--  温度-->
        <div id="humValues" :style="{ width:formState.width+'px', height: formState.height+'px' }"></div>
      </td>
      <td>
        <!--  温度-->
        <div id="adcxValues" :style="{ width:formState.width+'px', height: formState.height+'px' }"></div>
      </td>
    </tr>
  </div>

</template>

<script setup>

  import { reactive, ref, onBeforeMount, onMounted, createVNode, nextTick } from 'vue'
  import { zheXianTuShowTem } from '../../api/dataManage'
  import { Modal, message } from 'ant-design-vue'
  import * as echarts from 'echarts'

  const formState = reactive({
    device: 'ID20221111',
    //选择的时间范围
    bigCreateTime: '',
    smlCreateTime: '',

    //后台返回的数据
    temValue: [],
    humValue: [],
    adcxValue: [],
    times: [],
    minTem: 0,
    maxTem: 0,
    minHum: 0,
    maxHum: 0,
    minAdcx: 0,
    maxAdcx: 0,
    avgTem: 0,
    avgHum: 0,
    avgAdcx: 0,
    //是否展示图表
    isShowCard: true,
    isShowTimeScale: false,

    //提醒用户后台数据的时间范围
    biggestTime: '',
    smallestTime: '',
    //图表大小
    width: 480,
    height: 360,
  })

  const onRangeChange = (value, dateString) => {
    console.log('Selected Time: ', value)
    console.log('Formatted Selected Time: ', dateString)
    formState.smlCreateTime = dateString[0]
    formState.bigCreateTime = dateString[1]
  }
  const onRangeOk = value => {
    console.log('onOk: ', value)
  }

  const selectDate = () => {
    let res = zheXianTuShowTem(formState.device, formState.bigCreateTime, formState.smlCreateTime)
    res.then(res => {
      if (res.data.adcxValue.length === 0) {
        message.error('无数据！请选择合适的时间范围！')
        formState.isShowCard = false
      } else {
        message.success('分析成功!')
        formState.temValue = res.data.temValue
        formState.humValue = res.data.humValue
        formState.adcxValue = res.data.adcxValue
        formState.minTem = res.data.minTem
        formState.maxTem = res.data.maxTem
        formState.minHum = res.data.minHum
        formState.maxHum = res.data.maxHum
        formState.times = res.data.times
        formState.minAdcx = res.data.minAdcx
        formState.maxAdcx = res.data.maxAdcx
        formState.avgTem = res.data.avgTem
        formState.avgHum = res.data.avgHum
        formState.avgAdcx = res.data.avgAdcx

        formState.isShowCard = true
        drawTemLine()
        drawHumLine()
        drawAdcxLine()
        drawTemValues()
        drawHumValues()
        drawAdcxValues()
      }
    })
  }

  const beforeCreate = () => {
    let res = zheXianTuShowTem(formState.device, 'null', 'null')
    res.then(res => {
      if (res.data.adcxValue.length === 0) {
        message.error('无数据！')
        formState.isShowTimeScale = false
      } else {
        formState.isShowTimeScale = true
        let temp = res.data.times[0].split('T')
        formState.smallestTime = temp[0] + ' ' + temp[1] + ' '
        temp = res.data.times[res.data.times.length - 1].split('T')
        formState.biggestTime = ' ' + temp[0] + ' ' + temp[1]
      }
    })
  }

  onMounted(() => {
    beforeCreate()
    selectDate()
  })

  //  绘图
  function drawTemLine () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('myTemChartAnalysis')
    let myTemChartAnalysis = echarts.init(chartDom)

    let option = {
      title: {
        text: '温度折线图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Template']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: formState.times
      },
      yAxis: {
        type: 'value',
        min: formState.minTem - 1,
        max: formState.maxTem + 1,
      },
      series: [
        {
          name: 'Template',
          type: 'line',
          stack: 'Total',
          data: formState.temValue
        }
      ]
    }

    // 绘制图表
    myTemChartAnalysis.setOption(option)
  }

  //  绘图
  function drawHumLine () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('myHumChartAnalysis')
    let myHumChartAnalysis = echarts.init(chartDom)

    let option = {
      title: {
        text: '湿度折线图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Humidity']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: formState.times
      },
      yAxis: {
        type: 'value',
        min: formState.minHum - 1,
        max: formState.maxHum + 1,
      },
      series: [
        {
          name: 'Humidity',
          type: 'line',
          stack: 'Total',
          data: formState.humValue
        }
      ]
    }

    // 绘制图表
    myHumChartAnalysis.setOption(option)
  }

  //  绘图
  function drawAdcxLine () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('myAdcxChartAnalysis')
    let myAdcxChartAnalysis = echarts.init(chartDom)

    let option = {
      title: {
        text: '光照强度折线图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Lux']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: formState.times
      },
      yAxis: {
        type: 'value',
        min: formState.minAdcx - 1,
        max: formState.maxAdcx + 1,
      },
      series: [
        {
          name: 'Lux',
          type: 'line',
          stack: 'Total',
          data: formState.adcxValue
        }
      ]
    }

    // 绘制图表
    myAdcxChartAnalysis.setOption(option)
  }

  //  绘图
  function drawTemValues () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('temValues')
    let temValues = echarts.init(chartDom)

    const gaugeData = [
      {
        value: formState.minTem,
        name: 'minTem',
        title: {
          offsetCenter: ['0%', '-40%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '-25%']
        }
      },
      {
        value: formState.avgTem,
        name: 'avgTem',
        title: {
          offsetCenter: ['0%', '-5%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '10%']
        }
      },
      {
        value: formState.maxTem,
        name: 'maxTem',
        title: {
          offsetCenter: ['0%', '35%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '50%']
        }
      }
    ]
    let option = {
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#464646'
            }
          },
          axisLine: {
            lineStyle: {
              width: 40
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: gaugeData,
          title: {
            fontSize: 14
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 14,
            color: 'auto',
            borderColor: 'auto',
            borderRadius: 20,
            borderWidth: 1,
            formatter: '{value} °C'
          }
        }
      ]
    }

    // 绘制图表
    temValues.setOption(option)
  }
  //  绘图
  function drawHumValues () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('humValues')
    let humValues = echarts.init(chartDom)

    const gaugeData = [
      {
        value: formState.minHum,
        name: 'minHum',
        title: {
          offsetCenter: ['0%', '-40%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '-25%']
        }
      },
      {
        value: formState.avgHum,
        name: 'avgHum',
        title: {
          offsetCenter: ['0%', '-5%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '10%']
        }
      },
      {
        value: formState.maxHum,
        name: 'maxHum',
        title: {
          offsetCenter: ['0%', '35%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '50%']
        }
      }
    ]
    let option = {
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#464646'
            }
          },
          axisLine: {
            lineStyle: {
              width: 40
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: gaugeData,
          title: {
            fontSize: 14
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 14,
            color: 'auto',
            borderColor: 'auto',
            borderRadius: 20,
            borderWidth: 1,
            formatter: '{value} %'
          }
        }
      ]
    }

    // 绘制图表
    humValues.setOption(option)
  }

  //  绘图
  function drawAdcxValues () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('adcxValues')
    let adcxValues = echarts.init(chartDom)

    const gaugeData = [
      {
        value: formState.minAdcx,
        name: 'minAdcx',
        title: {
          offsetCenter: ['0%', '-40%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '-25%']
        }
      },
      {
        value: formState.avgAdcx,
        name: 'avgAdcx',
        title: {
          offsetCenter: ['0%', '-5%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '10%']
        }
      },
      {
        value: formState.maxAdcx,
        name: 'maxAdcx',
        title: {
          offsetCenter: ['0%', '35%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '50%']
        }
      }
    ]
    let option = {
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#464646'
            }
          },
          axisLine: {
            lineStyle: {
              width: 40
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: gaugeData,
          title: {
            fontSize: 14
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 14,
            color: 'auto',
            borderColor: 'auto',
            borderRadius: 20,
            borderWidth: 1,
            formatter: '{value} %'
          }
        }
      ]
    }

    // 绘制图表
    adcxValues.setOption(option)
  }

</script>

<style scoped>

</style>
